<template>
  <div class="out">
    <ul class="nav__tagul">
      <li v-for="(item, index) in curlist" :key="index">
        <router-link :to="'/blobtaglist/' + item.tagid">
          <span>{{ item.tag }}</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
export default {
  name: "tagHeader",
  data() {
    return {
      curlist: [],
    };
  },
  watch: {
    $route: {
      handler(route) {
        this.$store.dispatch("user/gettaglist").then(() => {
          if (this.$store.getters.taglist[this.$route.path]) {
            this.curlist = this.$store.getters.taglist[this.$route.path];
          } else {
            this.curlist = this.$store.getters.taglist["default"];
          }
        });
      },
      immediate: true,
    },
  },
  props: ["taglist"],
};
</script>
<style lang="scss" scoped>
.out {
  height: 30px;
  overflow-y: hidden;
}
.nav__tagul {
  margin: 10px auto 10px auto;
  list-style: none;
  &:after {
    display: block;
    clear: both;
    content: "";
  }
  li {
    float: left;
    width: 100px;
    box-sizing: border-box;
    padding: 0px;
    margin-right: 5px;
    background-color: rgba(10, 10, 10, 0.1);
  }
  span {
    text-decoration: none;
  }
  a {
    text-decoration: none;
    padding: 30px;
    font-weight: bold;
    color: #2c3e50;
  }

  a.router-link-exact-active {
    color: #42b983;
  }
}
</style>